<template>
    <div class="body">
        <button class="operation btn btn-primary" data-toggle="modal" data-target=".category-second">添加分类</button>
        <table class="table table-bordered">
            <tbody><tr>
                <th>品牌编号</th>
                <th>品牌名称</th>
                <th>品牌logo</th>
                <th>所属分类</th>
            </tr>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.brand}}</td>
                <td>
                    <img :src="item.logo">
                </td>
                <td>{{item.cate1name}}</td>
            </tr>
            </tbody></table>
        <div class="btn-group page">
            <div class="btn btn-default" id="prevBtn">上一页</div>
            <div class="btn btn-default" id="nextBtn">下一页</div>
        </div>
        <div class="modal fade category-second">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                        <h4 class="modal-title" id="myLargeModalLabel">添加分类</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <select class="form-control" @change="changeProduct($event)">
                                <option>请选择商品分类</option>
                                <option v-for="ite in cate1List" :value="ite.name">{{ite.name}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入商品品牌" v-model="brand">
                        </div>
                        <div class="form-group">
                            <input type="file" class="form-control" v-on:change="onChange($event)">
                        </div>
                        <img src="images/brand6.png" alt="..." class="img-thumbnail">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="addCate2Item">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return{
                list:[],
                cate1List:[],
                picture: {},
                brand:'',
                cate1name:'',
            }
        },
        created(){
            this.getCate2List();
            this.getCate1ALL();
        },
        methods:{
            getCate2List(){
                this.$http.get('http://127.0.0.1:3002/getCate2List').then((result)=>{
                    if(result.body.status == 0){
                        this.list = result.body.message;
                    }else{
                        Toast('您的网络抽风了')
                    }
                });
            },
            getCate1ALL(){
                this.$http.get('http://127.0.0.1:3002/getCate1All').then((result)=>{
                    if(result.body.status == 0){
                        this.cate1List = result.body.message;
                    }else{
                        Toast('您的网络抽风了')
                    }
                });
            },
            onChange: function (event) {
                this.picture = event.target.files[0]; // get input file object
                console.log(this.picture);
            },
            addCate2Item(){
                var formData = new FormData();
                formData.append('picture', this.picture);
                this.$http.post('http://127.0.0.1:3002/upload',formData, {
                    headers: { 'Content-Type': 'multipart/form-data' }
                }).then(result=>{
                    if(result.body.status == 0){
                        console.log(result.body.message);
                        var obj = {
                            brand: this.brand,
                            cate1name:this.cate1name,
                            logo:'images/'+result.body.message,
                        }
                        this.$http.post('http://127.0.0.1:3002/addCate2Item',obj,{emulateJSON:true}).then((result)=>{
                            if(result.body.status == 0){
                                Toast(result.body.message);
                                location.reload();
                            }else{
                                Toast('您的网络抽风了');
                            }
                        });
                    }else{
                        Toast('您的网络抽风了');
                    }
                })
            },
            changeProduct(event) {
                this.cate1name = event.target.value; //获取商品ID，即option对应的ID值
                //console.log(this.cate1name);
            }
        },

    }
</script>

<style scoped>

</style>